<template>
  <!-- 订单卡片容器 -->
  <view class="order-card">
    <!-- 状态标签角标 -->
    <view class="status-corner" :style="{ background: order.statusClass || 'status-corner--3' }">
      <text class="status-text">{{ order.statusStr }}</text>
    </view>

    <!-- 订单头部 -->
    <view class="order-header">
      <view class="order-main-info">
        <text class="order-title">订单 {{ order.orderNo }}</text>
        <view class="order-time-row">
          <text class="order-time"> {{ order.startTime }} - {{ order.endTime }} </text>
          <!-- 0:未支付, 1:已支付，3.已退款 -->
          <!-- <text class="order-refund" @click="returnPriceFun" v-if="order.status == 3 && order.paymentStatus == 1"> 退款 </text> -->
        </view>
      </view>
    </view>

    <!-- 订单详情区域 -->
    <view class="order-details">
      <!-- 信息卡片网格布局 -->
      <view class="info-grid">
        <!-- 手机信息 -->
        <view class="info-item">
          <text class="info-label">手机号：</text>
          <text class="info-value">{{ order.phon }}</text>
        </view>

        <!-- 密码信息 -->
        <view class="info-item">
          <text class="info-label">提取密码：</text>
            <text class="info-value">
              <template v-if="showPassword">{{ order.pwdstr }}</template>
              <template v-else>{{ '*'.repeat(order.pwdstr.length) }}</template>
            </text>
            <text class="toggle-btn" @click.stop="showPassword = !showPassword">
              {{ showPassword ? '隐藏' : '显示' }}
            </text>
        </view>

        <!-- 时长信息 -->
        <view class="info-item">
          <text class="info-label">使用时长：</text>
          <text class="info-value">{{ order.useLong }} 分钟</text>
        </view>

        <!-- 截止时间 -->
        <view class="info-item">
          <text class="info-label">截止时间：</text>
          <text class="info-value">每天</text>
        </view>
      </view>

      <!-- 地址信息区域 -->
      <view class="location-info">
        <uni-icons type="map-pin" size="28" color="#6b7280" class="location-icon"></uni-icons>
        <view class="location-details">
          <view class="location-line">
            <text class="info-label">寄存网点：</text>
            <text class="info-value">{{ order.pointName }}</text>
          </view>
          <view class="location-line">
            <text class="info-label">柜子信息：</text>
            <text class="info-value"> {{ order.counterAlias }} - {{ order.ip }}柜 </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { returnPriceAPI } from '@/api/currentLocker'
  import useToastMsg from '@/hooks/sysMsg'
  import { defineProps, ref } from 'vue'

  // 定义组件属性
  const props = defineProps<{
    order: any
  }>()
  const toastMsg = useToastMsg()

  // 密码显示状态
  const showPassword = ref(false)
  const returnPriceFun = () => {
    toastMsg.showModalMsg({
      title: '退款',
      content: '是否确定对该订单进行退款操作',
      options: {
        confirmColor: '#6aa8ff',
      },
      successCallback: async () => {
        const result = await returnPriceAPI({
          reFundAmount: '',
          orderNo: props.order.orderNo,
          userStorageId: props.order.userStorageId,
          type: '',
        })
        if (result) {
          toastMsg.showModalMsg({
            content: '退款成功',
            options: { showCancel: false },
          })
          emit('init')
        } else {
          toastMsg.showToast('退款失败')
        }
      },
    })
  }
  const emit = defineEmits(['init'])
</script>

<style scoped>
  /* 订单卡片主样式 */
  .order-card {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 24rpx;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .order-card:hover {
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
    transform: translateY(-2rpx);
  }

  /* 状态角标容器 - 增加装饰性三角切角 */
  .status-corner {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8rpx 30rpx 8rpx 40rpx; /* 左侧增加额外空间容纳切角 */
    color: #ffffff;
    font-size: 24rpx;
    font-weight: 700;
    text-align: center;
    border-bottom-left-radius: 20rpx;
    box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.1); /* 增加轻微阴影增强层次感 */
    transform: translateZ(0); /* 硬件加速优化 */
    overflow: hidden;
  }

  /* 装饰性三角元素 - 增强角标立体感 */
  .status-corner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20rpx;
    height: 20rpx;
    background-color: rgba(255, 255, 255, 0.15); /* 半透明白色增强渐变层次 */
    transform: rotate(45deg) translate(-50%, -50%);
    transform-origin: center;
  }

  /* 状态角标渐变优化 - 更自然的色彩过渡 */
  .status-corner--1 {
    background: linear-gradient(130deg, #4096ff 0%, #1677ff 100%);
  }

  .status-corner--2 {
    background: linear-gradient(130deg, #52c41a 0%, #389e0d 100%);
  }

  .status-corner--3 {
    background: linear-gradient(130deg, #8c8c8c 0%, #595959 100%);
  }
  /* 增加状态变化动画 - 提升交互体验 */
  .status-corner {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 卡片悬停时角标微动画 */
  .order-card:hover .status-corner {
    transform: scale(1.05);
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15);
  }

  /* 角标文本阴影 - 增强可读性 */
  .status-text {
    position: relative;
    z-index: 1; /* 确保文本在装饰元素上方 */
    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
  }

  /* 订单头部 */
  .order-header {
    margin-bottom: 28rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f2f3f5;
  }

  .order-main-info {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
  }

  .order-title {
    font-size: 32rpx;
    font-weight: 700;
    color: #1d2129;
  }

  /* 订单详情区域 */
  .order-details {
    margin-bottom: 30rpx;
  }

  /* 信息网格布局 */
  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24rpx 16rpx;
    margin-bottom: 28rpx;
  }

  .info-item {
    /* display: flex;
    flex-direction: column;
    gap: 6rpx; */
  }

  .info-label {
    font-size: 28rpx;
    color: #86909c;
    line-height: 1.2;
  }

  .info-value {
    font-size: 28rpx;
    color: #1d2129;
    font-weight: 500;
    line-height: 1.4;
  }

  /* 密码显示控制 */
  .password-wrapper {
    display: flex;
    align-items: center;
    gap: 10rpx;
  }

  .toggle-btn {
    font-size: 22rpx;
    color: #1677ff;
    padding: 4rpx 12rpx;
    border-radius: 16rpx;
    background-color: #e6f7ff;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
  }

  .toggle-btn:active {
    background-color: #bae7ff;
  }

  /* 地址信息区域 */
  .location-info {
    display: flex;
    padding: 20rpx;
    background-color: #f7f8fa;
    border-radius: 12rpx;
    align-items: flex-start;
    gap: 16rpx;
  }

  .location-icon {
    margin-top: 4rpx;
    opacity: 0.8;
  }

  .location-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
  }

  .location-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8rpx;
  }

  /* 操作按钮区 */
  .order-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16rpx;
    padding-top: 10rpx;
  }

  .action-btn {
    padding: 14rpx 28rpx;
    border-radius: 10rpx;
    font-size: 26rpx;
    font-weight: 500;
    line-height: 1;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .action-btn:active {
    transform: scale(0.97);
  }

  /* 按钮样式变体 */
  .action-btn--primary {
    background-color: #1677ff;
    color: #ffffff;
    border: none;
  }

  .action-btn--primary:hover {
    background-color: #0958d9;
  }

  .action-btn--default {
    background-color: #f2f3f5;
    color: #4e5969;
    border: none;
  }

  .action-btn--default:hover {
    background-color: #e5e6eb;
  }

  .action-btn--ghost {
    background-color: transparent;
    color: #4e5969;
    border: 1rpx solid #d9d9d9;
  }

  .action-btn--ghost:hover {
    background-color: #f2f3f5;
  }

  .order-time-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8rpx;
  }

  .order-time {
    font-size: 26rpx;
    color: #86909c;
    line-height: 1.4;
  }

  .order-refund {
    font-size: 26rpx;
    color: #ff4d4f;
    line-height: 1.4;
    font-weight: 700;
  }
</style>
